<template>
  <div class="collection">

    <div class="type">
      <div class="type-head">
        <el-image class="type-text" :src="require('@/assets/logo/logoH.png')"/>
      </div>
      <form class="find-button">
        <input class="find-input" type="text" placeholder="请输入您要搜索的内容..." v-model="searchText">
        <button class="find-click" type="button" @click="searchButton()"><i class="el-icon-search"/></button>
      </form>
    </div>

    <div class="searchDiv1" style="margin-bottom: 10px">

      <div @click="resetButton()" class="resetButton">全部结果</div>

      <div style="display: inline-block"  v-for="list in searchHtml" :key="list.id">
        <i class="el-icon-arrow-right" style="margin-left: 10px;margin-right: 10px"></i>
        <div class="searchTag" @click="attrHandleClose(list.id, list.name, list.value)">
          <span>{{ list.name }}：</span>
          <span style="color: rgb(60,133,39)">{{ list.value }}</span>
          <div class="searchTagIcon">
            <i class="el-icon-close"></i>
          </div>
        </div>
      </div>

      <div style="display: inline-block"
           v-show="searchParam.catelog3Id ? searchParam.catelog3Id.length !== 0 : ''">
        <i class="el-icon-arrow-right" style="margin-left: 10px;margin-right: 10px"></i>
        <div class="searchTag" @click="categoryHandleClose()">
          <span>分类：</span>
          <span style="color: rgb(60,133,39)">{{categoryTitleName}}</span>
          <div class="searchTagIcon">
            <i class="el-icon-close"></i>
          </div>
        </div>
      </div>

      <div style="display: inline-block"
           v-show="searchParam.brandId ? searchParam.brandId.length !== 0 : ''">
        <i class="el-icon-arrow-right" style="margin-left: 10px;margin-right: 10px"></i>
        <div class="searchTag" @click="brandHandleClose()">
          <span>品牌：</span>
          <span style="color: rgb(60,133,39)">{{brandTitleName}}</span>
          <div class="searchTagIcon">
            <i class="el-icon-close"></i>
          </div>
        </div>
      </div>

      <div
        style="display: inline-block;font-weight: bold;margin-left: 10px;line-height: 20px"
        v-show="searchParam.keyword ? searchParam.keyword.length !== 0 : ''">
        "{{searchParam.keyword}}"
      </div>
    </div>

    <div class="searchDiv1" style="border-top: rgb(220,220,220) 1px solid;border-bottom: rgb(220,220,220) 1px solid;">
      <div class="searchDiv2" v-show="list.brands ? list.brands.length > 1 : ''">
        <div class="searchTitle">品牌：</div>
        <div style="width: 960px;display: inline-block">
          <div
            class="brandDiv"
            v-for="item in list.brands"
            :key="item.brandId"
            @click="brandButton(item.brandId, item.brandName)">
            <el-image
              class="brandImgButton"
              :src="item.brandImg"
              fit="fill">
            </el-image>
            <div class="brandNameText">
              {{ item.brandName }}
            </div>
          </div>
        </div>
      </div>

      <div class="searchDiv2" v-show="list.categorys ? list.categorys.length > 1 : ''">
        <span class="searchTitle">分类：</span>
        <div style="width: 960px;display: inline-block">
          <span
            class="categoryButton"
            v-for="item in list.categorys"
            :key="item.catalogId"
            @click="categoryButton(item.catalogId, item.catalogName)">
            {{ item.catalogName }}
          </span>
        </div>
      </div>

      <div
        class="searchDiv2"
        v-for="item in list.attrs"
        :key="item.attrId"
        v-show="item.attrValue.length > 1">
        <span class="searchTitle">{{item.attrName}}：</span>
        <div style="width: 960px;display: inline-block">
          <span
            class="categoryButton"
            v-for="value in item.attrValue"
            style="margin-right: 20px"
            @click="attrButton(item.attrId, item.attrName, value)">
            {{ value }}
          </span>
        </div>
      </div>
    </div>

    <div class="searchDiv1" style="padding: 10px;margin-top: 10px;background-color: rgb(235,235,235);border-top: rgb(220,220,220) 1px solid;border-bottom: rgb(220,220,220) 1px solid;">
      <div style="width: 40%;display: inline-block;float:left;">
        <el-radio-group v-model="searchParam.sort" fill="rgb(60,133,39)" @input="sortButton()">
          <el-radio-button :label="null" class="sortButton">综合<i style="margin-left: 5px" class="el-icon-caret-bottom"></i></el-radio-button>
          <el-radio-button label="saleCount_desc" class="sortButton">销量<i style="margin-left: 5px" class="el-icon-caret-bottom"></i></el-radio-button>
          <el-radio-button label="hotScore_desc" class="sortButton">评论数<i style="margin-left: 5px" class="el-icon-caret-bottom"></i></el-radio-button>
          <el-radio-button label="skuPrice_desc" class="sortButton">价格<i style="margin-left: 5px" class="el-icon-caret-bottom"></i></el-radio-button>
          <el-radio-button label="skuPrice_asc" class="sortButton">价格<i style="margin-left: 5px" class="el-icon-caret-top"></i></el-radio-button>
        </el-radio-group>
      </div>

      <div style="width: 60%;display: inline-block;">
        <input class="priceInput" v-model.number="prePrice" type="text"></input>
        <span style="margin-left: 6px;margin-right: 6px;float:left;margin-top: 8px">-</span>
        <input class="priceInput" v-model.number="postPrice" type="text"></input>
        <div class="resetPriceButton" @click="resetPrice()">清空</div>
        <div class="resetPriceButton" @click="priceButton()" style="border: rgb(60,133,39) 1px solid;color: rgb(60,133,39)">查询</div>
        <div style="float: right;line-height: 36px">
          <div class="pageButton" @click="rightPage()" :class="[list.pageNum < list.totalPages ? '' : 'pageButtonStop']"><i class="el-icon-right"></i></div>
          <div class="pageButton" @click="backPage()" :class="[list.pageNum > 0 ? '' : 'pageButtonStop']"><i class="el-icon-back"></i></div>
          <div style="display: inline-block;float: right">
            共有
            <span style="margin-left: 1px;margin-right: 1px">{{list.total}}</span>
            件商品
            <span style="margin-right: 1px;margin-left: 10px;color: rgb(60,133,39);font-weight: bold;">{{list.pageNum + 1}}</span>
            /
            <span style="margin-right: 10px;margin-left: 1px">{{list.totalPages + 1}}</span>
          </div>

        </div>
      </div>
    </div>

    <div class="searchDiv1" style="background-color: rgb(238,238,238);height: 40px;line-height: 40px;border-bottom: rgb(220,220,220) 1px solid;">
      <el-checkbox v-model="searchParam.hasStock" style="margin-left: 10px" @change="hasStockButton">仅显示有货</el-checkbox>
    </div>

    <div class="productDiv">
      <div class="productDetail" v-for="item in list.products" :key="item.skuId">
        <el-image
          class="productImg"
          :src="item.skuImg"
          fit="fill"
          @click="routeProductDetail(item.skuId)">
        </el-image>
        <div style="font-size: 13px;">

          <div style="color: red;font-size: 20px;margin-top: 10px;margin-bottom: 10px;">￥{{item.skuPrice}}.00</div>

          <div style="color: rgb(102,102,102);line-height: 25px;height: 50px;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;margin-bottom: 10px">
            <span v-html="item.skuTitle" :title="item.skuTitle"></span>
          </div>

          <span style="color: rgb(178,170,167);">
            已有
            <span style="color: rgb(100,111,176);font-weight: bold;letter-spacing: 1px;margin-left: 2px;margin-right: 2px">200+</span>
            条评论
          </span>

          <div style="margin-top: 10px;color: rgb(178,170,167);height: 20px;line-height: 20px" title="MaxLen自营店官方旗舰店">
            <div style="float: left">MaxLen自营店官方旗舰店</div>
            <i style="margin-left: 10px;font-size: 20px;color: rgb(60,133,39);" class="el-icon-coffee-cup"></i>
          </div>

          <div style="margin-top: 10px">
            <el-tooltip content="MaxLen自营，品质保障" placement="bottom" effect="light">
              <div class="productTag1">自营</div>
            </el-tooltip>
            <el-tooltip content="本商品参与满减促销" placement="bottom" effect="light">
              <div class="productTag2">满赠</div>
            </el-tooltip>
          </div>

          <div style="margin-top: 10px">
            <div class="followButton"><i class="el-icon-star-off"></i>关注</div>
            <div class="shoppingCartButton" @click="addShoppingCart(item.skuId)"><i class="el-icon-shopping-cart-2"></i>加入购物车</div>
          </div>

        </div>
      </div>
    </div>

    <div class="searchDiv1" style="height: 80px;margin-top: 20px">
      <el-pagination
        class="elPagination"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="10"
        :hide-on-single-page="true"
        background
        layout="prev, pager, next, jumper"
        :total="list.total * 1"
        style="float: right;">
      </el-pagination>
    </div>

  </div>
</template>

<script>

import {getName, getPhoto, getToken} from "@/utils/auth";

export default {
  name: 'Collection',
  data() {
    return {
      searchHtml: [],
      currentPage: 1,
      prePrice: '',
      postPrice: '',
      searchText: '',
      categoryTitleName: '',
      brandTitleName: '',
      searchParam: {
        // 搜索框值
        keyword: null,
        // 三级分类 id
        catelog3Id: null,
        // 排序条件
        sort: null,
        // 是否只显示有货
        hasStock: false,
        // 价格区间查询
        skuPrice: null,
        // 品牌 id
        brandId: [],
        // 规格属性
        attrs: [],
        // 页码
        pageNum: null
      },
      brandNameText: false,
      list: {}
    }
  },
  created() {
    this.searchProduct()
  },
  methods: {
    addShoppingCart(id){
      this.$store.dispatch('cart/cart/setCartItem', {skuId: id, count: 1})
        .then((data)=>{

          let routeData = this.$router.resolve({
            path: "/cart-success",
            query: {
              data: JSON.stringify(data.data),
              count: 1
            }
          });

          //必要操作，否则不会打开新页面
          window.open(routeData.href, '_blank');
        })
        .catch(()=>{})
    },
    searchButton(){
      if(this.$route.query !== undefined){
        console.log(this.$route.query)
        this.$router.push(`${this.$route.path}`)
      }
      this.searchParam.keyword = this.searchText
      this.searchProduct()
    },
    resetButton(){
      this.searchParam.keyword = null
      this.searchParam.catelog3Id = null
      this.searchParam.sort = null
      this.searchParam.hasStock = null
      this.searchParam.skuPrice = null
      this.searchParam.brandId = []
      this.searchParam.attrs = []
      this.searchParam.pageNum = null
      this.searchHtml = []
      this.searchProduct()
    },
    attrHandleClose(id, name, value){

      let attr = this.searchParam.attrs.findIndex(item => {
        if (item === id) {
          return true
        }
      });
      this.searchParam.attrs.splice(attr, 1)

      this.searchProduct()

      let list = this.searchHtml.findIndex(item => {
        if (item.name === name && item.value === value) {
          return true
        }
      });
      this.searchHtml.splice(list, 1)

    },
    categoryHandleClose(){
      this.$router.push(`${this.$route.path}`)
      this.searchParam.catelog3Id = null
      this.searchProduct()
    },
    brandHandleClose(){
      this.searchParam.brandId = null
      this.searchProduct()
    },
    brandButton(id, name){
      this.searchParam.pageNum = null
      this.brandTitleName = name
      this.searchParam.brandId = id
      this.searchProduct()
    },
    categoryButton(id, name){
      this.searchParam.pageNum = null
      this.categoryTitleName = name
      this.searchParam.catelog3Id = id
      this.searchProduct()
    },
    attrButton(id, name, value){
      this.searchParam.pageNum = null
      this.searchHtml.push({
        id: id + '_' + value,
        name: name,
        value: value
      })
      this.searchParam.attrs.push(id + '_' + value)
      this.searchProduct()
    },
    sortButton(){
      this.searchProduct()
    },
    resetPrice(){
      this.prePrice = ''
      this.postPrice = ''
      this.searchParam.skuPrice = null
      this.searchProduct()
    },
    priceButton(){
      this.searchParam.skuPrice = this.prePrice + '_' + this.postPrice
      this.searchProduct()
    },
    rightPage(){
      this.searchParam.pageNum += 1
      this.searchProduct()
    },
    backPage(){
      this.searchParam.pageNum -= 1
      this.searchProduct()
    },
    hasStockButton(){
      this.searchProduct()
    },
    routeProductDetail(id){
      console.log(id)
      let routeData = this.$router.resolve({
        path: "/product-detail",
        query: {
          skuId: id
        }
      });

      //必要操作，否则不会打开新页面
      window.open(routeData.href, '_blank');
    },
    handleCurrentChange(val) {
      this.searchParam.pageNum = val - 1
      this.searchProduct()
    },
    searchProduct(){
      this.$store.dispatch('search/search/searchProduct', this.searchParam)
        .then((data) => {
          this.list = data.data
          console.log(this.list)
        })
    },
  },
  watch:{
    $route: {
      immediate: true,
      handler: function (route) {
        if(route.query.catId !== undefined){
          this.searchParam.catelog3Id = route.query.catId
          this.categoryTitleName = route.query.name
        }

        if(route.query.keyword !== undefined){
          this.searchParam.keyword = route.query.keyword
        }

        if(route.query.brandId !== undefined){
          this.searchParam.brandId = route.query.brandId
          this.brandTitleName = route.query.name
        }
      }
    }
  }
}
</script>

<style lang="scss">
// 多选框
.el-checkbox__input.is-checked .el-checkbox__inner{
  background-color: rgb(60,133,39);
  border-color: rgb(60,133,39);
}
.el-checkbox__inner:hover{
  border-color: rgb(60,133,39);
}
.el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: rgb(60,133,39);
}
.el-checkbox__input.is-checked + .el-checkbox__label{
  color: rgb(60,133,39);
}

// 标签
.el-tag.el-tag--info{
  height: 35px;
  font-size: 16px;
  text-align: center;
  line-height: 35px;
  border: rgb(220,220,220) 1px solid;
  border-radius: 0px;

  &:hover{
    border: rgb(60,133,39) 1px solid;
  }
}

// 分页
.elPagination > button {
  width: 50px;
  height: 50px;
  border: rgb(221,221,221) 1px solid;

  &:hover{
    color: rgb(60,133,39);
    border: rgb(60,133,39) 1px solid;
  }
}
.elPagination > ul li{
  width: 50px;
  height: 50px;
  padding-top: 12px;
  border: rgb(221,221,221) 1px solid;

  &:hover{
    color: rgb(60,133,39);
    border: rgb(60,133,39) 1px solid;
  }
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: rgb(60,133,39);
}
//.el-pagination.is-background .el-pager li:not(.disabled):hover{
//  color: rgb(60,133,39);
//}
.el-pagination__editor.el-input{
  width: 50px;
  height: 50px;
}
.el-pagination__editor.el-input .el-input__inner{
  width: 50px;
  height: 50px;
}
</style>

<style lang="scss" scoped>
.collection {
  height: 100%;
  width: 100%;
  background-color: rgb(245,245,245);

  .resetButton{
    display: inline-block;

    &:hover{
      cursor: pointer;
      color: rgb(60,133,39);
    }
  }

  .brandDiv{
    //display: inline-block;
    float: left;
    height: 80px;
    width: 180px;
    position: static;
    margin-top: -1px;
    margin-left: -1px;
    border: rgb(221,221,221) 1px solid;
    background-color: white;

    &:hover{
      cursor: pointer;
      .brandNameText{
        display: block;
      }
    }

    .brandImgButton{
      margin-top: 10px;
      margin-left: 10px;
      width: 160px;
      height: 60px;
      position: absolute;
    }

    .brandNameText{
      display: none;
      width: 180px;
      height: 80px;
      position: absolute;
      text-align: center;
      line-height: 80px;
      color: rgb(60,133,39);
      background-color: white;
      border: rgb(60,133,39) 2px solid;
    }
  }

  .searchDiv1{
    width: 1300px;
    margin: 0 auto;

    .searchTag{
      display: inline-block;
      height: 35px;
      font-size: 16px;
      text-align: center;
      line-height: 35px;
      padding-left: 10px;
      border: rgb(220,220,220) 1px solid;
      background-color: rgb(230,230,230);

      .searchTagIcon{
        display: inline-block;
        width: 35px;
        height: 33px;
      }

      &:hover{
        cursor: pointer;
        border: rgb(60,133,39) 1px solid;

        .searchTagIcon{
          display: inline-block;
          width: 35px;
          height: 33px;
          background-color: rgb(60,133,39);
          color: white;
        }
      }
    }

    .searchDiv2{
      //border-top: rgb(235,235,235) 1px solid;
      //border-bottom: rgb(220,220,220) 1px solid;
      margin-top: -1px;
      padding: 10px;

      .searchTitle{
        display: inline-block;
        font-weight: bold;
        width: 100px;
        float: left;
        margin-right: 50px;
      }
    }

    .sortButton{
      border: rgb(220,220,220) 1px solid;

      &:hover{
        cursor: pointer;
        color: rgb(60,133,39);
        border: rgb(60,133,39) 1px solid;
      }
    }

    .priceInput{
      -web-kit-appearance:none;
      -moz-appearance: none;
      display: inline-block;
      border: rgb(220,220,220) 1px solid;
      width: 100px;
      height: 36px;
      padding-right: 10px;
      float: left;
    }
    .priceInput:focus{
      border: rgb(60,133,39) 1px solid;
    }

    .resetPriceButton{
      height: 36px;
      width: 50px;
      border: rgb(220,220,220) 1px solid;
      background-color: white;
      display: inline-block;
      margin-left: 10px;
      line-height: 36px;
      text-align: center;

      &:hover{
        cursor: pointer;
      }
    }

    .pageButton{
      display: inline-block;
      float: right;
      width: 80px;
      border: rgb(220,220,220) 1px solid;
      background-color: white;
      text-align: center;

      &:hover{
        cursor: pointer;
        color: rgb(60,133,39);
        border: rgb(60,133,39) 1px solid;
      }
    }

    .pageButtonStop{
      pointer-events: none;
      background-color: rgb(235,235,235);
    }
  }

  .categoryButton{
    margin-right: 40px;
    color: rgb(0,90,160);

    &:hover{
      cursor: pointer;
      color: rgb(60,133,39);
    }
  }

  .type {
    width: 1300px;
    height: 80px;
    margin: 0 auto;
    text-align: center;
    //padding-top: 20px;
    //padding-bottom: 20px;

    .type-head {
      width: 130px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      float: left;

      .type-text {
        height: 50px;
        width: 130px;
        margin-top: 15px;
        //display: inline-block;
        //font-size: 16px;
        //margin-top: 13px;
        //margin-right: 20px;
        //float: left;

        &:hover {
          cursor: pointer;
          //color: rgb(79,159,52);
        }
      }
    }

    .find-button {
      background-color: white;
      position: relative;
      width: 400px;
      float: right;
      border: 1px solid rgb(178,178,178);
      margin-top: 19px;

      .find-input {
        background: transparent;
        width: 100%;
        height: 42px;
        padding-left: 13px;
        padding-right:46px;
        border: none;
        outline: none;
        font-size: 10px;
      }

      .find-click {
        background: transparent;
        top: 0;
        right: 0;
        height: 42px;
        width: 42px;
        cursor: pointer;
        position: absolute;
        border: none;
        outline: none;
      }
    }

  }

  .productDiv{
    width: 1360px;
    margin: 0 auto;

    .productDetail{
      display: inline-block;
      width: 236px;
      height: 480px;
      margin-left: 30px;
      margin-top: 30px;
      border: rgb(221,221,221) 1px solid;
      padding: 10px;

      &:hover{
        border: rgb(60,133,39) 1px solid;
        box-shadow: 0 0 2px 2px #f8f8f8;
      }

      .productImg{
        width: 216px;
        height: 236px;

        &:hover{
          cursor: pointer;
        }
      }

      .productTag1{
        display: inline-block;
        width: 40px;
        height: 20px;
        background-color: rgb(60,133,39);
        color: white;
        text-align: center;
        line-height: 20px;
        float: left;
        margin-right: 10px;
        font-size: 13px;
      }
      .productTag2{
        display: inline-block;
        width: 40px;
        height: 20px;
        border: rgb(60,133,39) 1px solid;
        color: rgb(60,133,39);
        text-align: center;
        line-height: 20px;
        font-size: 13px;
      }

      .followButton{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        border: rgb(221,221,221) 1px solid;

        i{
          font-size: 18px;
          margin-right: 5px;
        }

        &:hover{
          cursor: pointer;
          border: rgb(60,133,39) 1px solid;
          color: rgb(60,133,39);
        }
      }
      .shoppingCartButton{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
        border: rgb(221,221,221) 1px solid;
        color: rgb(60,133,39);

        i{
          font-size: 18px;
          margin-right: 5px;
        }

        &:hover{
          cursor: pointer;
          border: rgb(60,133,39) 1px solid;
        }
      }
    }
  }
}
</style>
